<template>
  <div class="category-menu">
    <h3 class="category-title">分类</h3>
    <ul class="category-list">
      <li v-for="(category, index) in categories" :key="index" class="category-item">
        <div class="category-icon">
          <el-icon>
            <component :is="category.icon" v-if="category.icon" />
            <Calendar v-else />
          </el-icon>
        </div>
        <div class="category-text">
          <span v-for="(item, i) in category.items" :key="i">
            <span class="item-text" @click.stop="goSearch(item)">{{ item }}</span>
            <span v-if="i < category.items.length - 1" class="separator">/</span>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {Calendar } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const categories = [
  {
    icon: 'Calendar',
    items: ['年中盛典', '抢省钱补贴']
  },
  {
    icon: 'Monitor',
    items: ['电脑', '配件', '办公', '文具']
  },
  {
    icon: 'Box',
    items: ['工业品', '商业', '农业', '定制']
  },
  {
    icon: 'Cellphone',
    items: ['家电', '手机', '通信', '数码']
  },
  {
    icon: 'Goods',
    items: ['家具', '家装', '家居', '厨具']
  },

  {
    icon: 'Football',
    items: ['女鞋', '男鞋', '运动', '户外']
  },
  {
    icon: 'Van',
    items: ['汽车', '珠宝', '文玩', '箱包']
  },
  {
    icon: 'Food',
    items: ['食品', '生鲜', '酒类', '健康']
  },
  {
    icon: 'House',
    items: ['母婴', '童装', '玩具', '宠物']
  },
  {
    icon: 'Brush',
    items: ['美妆', '个护', '娱乐', '图书']
  }
]
// 搜索
const router = useRouter()
const goSearch = (keyword: string) => {
  if (!keyword) return
  router.push({
    name: 'SearchResults',
    query: { keyword }
  })
}
</script>

<style lang="scss" scoped>
.category-menu {
  background: linear-gradient(to right, #ffffff, #ffeef8);
  border-radius: 0.5rem;
  padding: 0.375rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1);
  
  .category-title {
    font-size: 0.8125rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: #e07676;
    padding-bottom: 0.1875rem;
    border-bottom: 0.0625rem solid #ffd9e9;
  }
  
  .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    .category-item {
      display: flex;
      align-items: center;
      padding: 0.1875rem 0;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 0.6875rem;
      
      &:hover {
        background-color: #ffe6f2;
        border-radius: 0.25rem;
        padding-left: 0.3125rem;
      }
      
      .category-icon {
        margin-right: 0.375rem;
        color: #e07676;
        width: 1rem;
        text-align: center;
        font-size: 0.75rem;
      }
      
      .category-text {
        flex: 1;
        color: #333;
        font-size: 0.625rem;
        .item-text {
          cursor: pointer;
          &:hover {
            color: #ee5530;
          }
        }
        
        .separator {
          margin: 0 0.125rem;
          color: #999;
        }
      }
    }
  }
}
</style>
